import React, { useEffect, useState } from 'react'
import { Tabs, Space, Radio, Button, Form, Row, Input, Dropdown, DatePicker, Table, Modal } from 'antd';
import type { RadioChangeEvent } from 'antd';
import type { MenuProps } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { useSelector, useDispatch } from "umi"
import SaleInfo from '@/components/saleInfo';

const RangePicker: any = DatePicker.RangePicker;

type Props = {}

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    tags: string[];
}




const PastSale = (props: Props) => {
    const [openInfo, setOpenInfo] = useState<boolean>(false);
    const [saleId, setSaleId] = useState<string>();
    const [statusData, setStatusData] = useState<number>();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const saleState = useSelector((state: { order: [], saleDate: [] }) => {
        //state整个仓库i数据，product是仓库命名空间
        return state.order
    })
    const [form] = Form.useForm();
    const [afterForm] = Form.useForm();
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch({
            type: "order/querySale",
        })
    }, [])

    const onClick: MenuProps['onClick'] = ({ key }) => {
        console.log("key", key);
        switch (key) {
            case '1':
                setOpenInfo(true);
                break;
            case '2':
                showModal()
                break;
        }
    };

    //表格操作-更多
    const items: MenuProps['items'] = [
        { key: '1', label: '订单详情' },
        { key: '2', label: '售后备注' }
    ];


    const columns: ColumnsType<DataType> = [
        {
            title: '订单号',
            dataIndex: '_id',
            key: '_id',
        },
        {
            title: '用户信息',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '商品信息',
            key: 'goods',
            render: (goods) => {
                return <Space>
                    <img style={{ width: "40px", height: '40px' }} src={goods.img}></img>
                    <span style={{ marginLeft: '5px' }}>{goods.title}</span>
                    <span style={{ marginLeft: '5px' }}>￥{goods.price}*{goods.count}</span>
                </Space>
            }
        },
        {
            title: '实际支付',
            key: 'pay_actual',
            dataIndex: 'pay_actual',
        },
        {
            title: '发起退款时间',
            key: 'refund_time',
            dataIndex: 'refund_time',
        },
        {
            title: '退款状态',
            key: 'status',
            dataIndex: 'status',
        },
        {
            title: '退款信息',
            key: 'refund_note',
            dataIndex: 'refund_note',
        },
        {
            title: '售后备注',
            key: 'after_note',
            dataIndex: 'after_note',
        },
        {
            title: '操作',
            dataIndex: '_id',
            key: 'action',
            render: (_id) => (
                <Space size="middle">
                    <Dropdown menu={{ items, onClick }}>
                        <a onClick={() => more(_id)}>
                            更多 <DownOutlined />
                        </a>
                    </Dropdown>
                </Space>
            ),
        },
    ];

    //更多订单
    const more = (_id: string) => {
        // 保存订单id
        setSaleId(_id)
        //状态机获取待修改的商品信息
        dispatch({
            type: "order/saleGood",
            payload: { _id }
        })

    }

    //订单详情模态框
    const infoClose = (value: boolean) => {
        setOpenInfo(value)
    }


    const changePay = (e: RadioChangeEvent) => {
        console.log(e.target.value);
        if(e.target.value==0){
            dispatch({
                type: "order/querySale"
            })
        }else{
            setStatusData(e.target.value)
            dispatch({
                type: "order/querySale",
                payload:{status:e.target.value}
            })
        }

        // status
    };

    const changeDate = (value: any, dateString: any) => {
        console.log("dateString", dateString);
        // settimeData(dateString)
    }

    const onFinish = (values:any) => {
        console.log("values",values);
        values.status=statusData
        dispatch({
            type: "order/querySale",
            payload:values
        })
        
    }

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
        const values=afterForm.getFieldsValue();
        // console.log("values",values);
        dispatch({
            type: "order/afterNode",
            payload:{_id:saleId,...values}
        })
        dispatch({
            type: "order/querySale",
        })
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <>
            <Space style={{ marginBottom: '10px' }}>
                方式:
                <Radio.Group onChange={changePay}>
                    <Radio.Button value="0" checked>全部</Radio.Button>
                    <Radio.Button value="-1">已退款</Radio.Button>
                    <Radio.Button value="1">未退款</Radio.Button>
                    <Radio.Button value="2">拒绝退款</Radio.Button>
                </Radio.Group>
            </Space>

            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}

            >
                <Row gutter={24} style={{ margin: '0px 0px', width: '60vw', display: 'flex', justifyContent: 'space-between' }}>

                    <Form.Item name="dataLimit" label="时间" >
                        <RangePicker onChange={changeDate} />
                    </Form.Item>
                    <Form.Item name="_id" label="订单编号" >
                        <Input style={{ width: '200px' }} placeholder="请输入订单编号" />
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Row>
            </Form>



            <Table className='table'
                pagination={{ defaultPageSize: 4 }}
                columns={columns}
                rowKey="_id"
                dataSource={saleState.saleDate}
            />

            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={afterForm}
                    className="ant-advanced-search-form"
                    onFinish={onFinish}

                >
                    <Row gutter={24} >
                        <Form.Item name="after_note" label="备注" >
                        <Input.TextArea style={{ width: '400px',}}/>
                        </Form.Item>
                    </Row>
                </Form>
            </Modal>

            <SaleInfo openInfo={openInfo} infoClose={infoClose}></SaleInfo>
        </>
    )
}

export default PastSale